<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="formRules"
    :hideRequiredMark="title == '详情'"
  >
    <div class="form-content">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="制件日期：" prop="produceDate">
            <a-date-picker
              placeholder="请选择制件日期"
              v-model="form.produceDate"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              :disabled="title == '详情'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="水泥品种：" prop="kind">
            <a-select
              placeholder="请选择水泥品种"
              v-model="form.kind"
              @change="changeKind"
              :disabled="title == '详情'"
            >
              <a-select-option :value="v" v-for="(v, i) in kinds" :key="i">
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="设计强度：" prop="strengthGrade">
            <a-select
              placeholder="请选择设计强度"
              v-model="form.strengthGrade"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in designStrengthList"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="养护龄期：" prop="curingAge">
            <a-select
              placeholder="请选择养护龄期"
              v-model="form.curingAge"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in curingAges"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试验依据：">
            <a-input
              placeholder="请输入试验依据"
              v-model="form.trialBasis"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>

        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="水泥批量：">
            <a-input
              placeholder="请输入水泥批量"
              v-model="form.batch"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="代号：">
            <a-input
              placeholder="请输入代号"
              v-model="form.codeName"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="出厂批号：">
            <a-input
              placeholder="请输入出厂批号"
              v-model="form.batchNum"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="生产厂家：">
            <a-input
              placeholder="请输入生产厂家"
              v-model="form.produceCompany"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="养护方式：">
            <a-input
              placeholder="请输入养护方式"
              v-model="form.curing"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试件尺寸：">
            <a-select
              placeholder="请选择试件尺寸"
              v-model="form.size"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in sizesList"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </a-form-model>
</template>
<script>
import { trialInfo, snInfo } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["title", "trialNum"],
  watch: {
    trialNum: {
      handler(val) {
        if (val) {
          this.trialInfo();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        produceDate: "", //制件日期
        kind: undefined, //水泥品种
        strengthGrade: undefined, //设计强度
        curingAge: undefined, //养护龄期
        trialBasis: "", //试验依据
        batch: "", //水泥批量
        codeName: "", // 代号
        batchNum: "", //出厂批号
        produceCompany: "", //生产厂家
        curing: "", //养护方式
        size: undefined, //试件尺寸
      },
      formRules: {
        produceDate: [
          {
            required: true,
            message: "请选择制件日期",
            trigger: "change",
          },
        ],
        kind: [
          {
            required: true,
            message: "请选择水泥品种",
            trigger: "change",
          },
        ],
        strengthGrade: [
          {
            required: true,
            message: "请选择设计强度",
            trigger: "change",
          },
        ],
        curingAge: [
          {
            required: true,
            message: "请选择养护龄期",
            trigger: "change",
          },
        ],
      },
      kinds: [],
      curingAges: [],
      sizesList: [],
      designStrengthList: [],
    };
  },
  mounted() {
    this.form = {
      produceDate: "", //制件日期
      kind: undefined, //水泥品种
      strengthGrade: undefined, //设计强度
      curingAge: undefined, //养护龄期
      trialBasis: "", //试验依据
      batch: "", //水泥批量
      codeName: "", // 代号
      batchNum: "", //出厂批号
      produceCompany: "", //生产厂家
      curing: "", //养护方式
      size: undefined, //试件尺寸
    };
  },
  methods: {
    validateHandle() {
      let status = "";
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true;
        } else {
          status = false;
        }
      });
      return status;
    },
    // 水泥品种切换，获取设计强度列表
    changeKind() {
      snInfo({
        trialNum: this.trialNum,
        kind: this.form.kind,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.designStrengthList = result || [];
        })
        .catch((_) => {});
    },
    // 试验信息
    trialInfo() {
      trialInfo({
        trialNum: this.trialNum,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.kinds = result.kinds;
          this.curingAges = result.curingAges;
          this.sizesList = result.sizes;
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.form-content {
  padding: 0 120px 0 20px;
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 160px;
    min-width: 160px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
